import React from 'react';
import logo from './logo.svg';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import TodoContainer from './TodoContainer'
import UserProfile from './UserProfile'
import './App.css';

function App() {
  return (
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
         <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/todo">Todo List</Link>
            </li>
            <li>
              <Link to="/user/1">User1</Link>
            </li>
            <li>
              <Link to="/user/2">User2</Link>
            </li>
          </ul>
        </nav>
               <Switch>
          <Route path="/todo">
            <TodoContainer />
          </Route>
          <Route path="/user/:userid">
            <UserProfile />
          </Route>
        </Switch>
      </div>
    </Router>
  </div>
  );
}

export default App;
